<template>
	<div name="limiteSignIn">
		<van-nav-bar
			:title="navBarTittle"
			left-arrow
			left-text="返回"
			fixed
			@click-left="$router.go(-1)"
		/>
        <h2>请注意抓紧时间签到</h2>
        <h2>👇签到任务的倒计时如下👇 </h2>
        <h3>{{daojishi}}</h3>
		
        <!-- <van-count-down :time="time">
            <template #default="timeData">
                <span class="block">{{ timeData.hours }}</span>
                <span class="colon">:</span>
                <span class="block">{{ timeData.minutes }}</span>
                <span class="colon">:</span>
                <span class="block">{{ timeData.seconds }}</span>
            </template>
        </van-count-down> -->
        
        <div style="margin: 16px;">
            <van-button round type="info" @click="onSignIn" :disabled="btnDisable">签到</van-button>
        </div>
	</div>
</template>

<script>
	import {getLocation, longitude , latitude} from '@/api/gps.js';
    import { signInForStudent } from '@/api/signIn.js';
    import { Toast } from 'vant';
	export default {
        name: 'limiteSignIn',
		created() {
			getLocation();
			// this.signInTaskInfo = JSON.parse(localStorage.getItem('signInTaskInfo'));
			this.detailBankeInfo = JSON.parse(localStorage.getItem('detailBankeInfo'));
			// this.viewTaskForStudentALL(this.detailBankeInfo.id);
			setInterval(()=>{                        
                this.overTime = (Date.parse(this.signInTaskInfo.createTime) + this.signInTaskInfo.timeout*1000) - new Date().getTime()
            },1000);
		},
		data() {
			return {
				btnDisable: false,
                // signInTaskInfo: {},
				// time: 1000 * 60 * 10,
				overTime: -1,
			}
		},
		props: [
			'signInTaskInfo'
		],
		computed: {
			navBarTittle() {
                return "限时签到" 
            },
			daojishi() {
                if(this.overTime<0) {
                    return '00:00'
                } else 
                return parseInt(this.overTime/1000/60)+':' + parseInt(this.overTime/1000%60);     
            }
		},
		methods: {
			// async viewTaskForStudentALL(courseId) {
            //     let curPage = 1;                
            //     while(this.taskTotal > (curPage-1)*10) {
            //         await viewTaskForStudent(curPage ,10 ,courseId).then(res => {
            //             console.log(res);
            //             if(res.data.code === 0) {
            //                 this.taskTotal = res.data.data.total;
            //                 for(let r of res.data.data.records) {                            
            //                     if(!r.ended) { // 如果课程没结束
            //                         console.log('没结束的课程信息');
            //                         console.log(r); // 没结束的课程信息
            //                         this.signInTaskInfo = r;
			// 						// localStorage.setItem('signInTaskInfo' , JSON.stringify(r));
            //                         break;
            //                     }
            //                 }                     
            //             } else {
            //                 this.taskTotal = 0;
            //             }
            //         }).catch(err => console.log(err));
            //         curPage++;
            //     }                
            // },
			onSignIn() {
				const entity = {
					"latitude": latitude,
					"longitude": longitude,					 
				}
				
				signInForStudent(this.signInTaskInfo.id,entity).then(res => {
					console.log(res);
					if(res.data.code === 0) {
						Toast('签到已完成');
						this.btnDisable = true;
					} else {
						Toast('您已成功签到，请勿重复签到！');
					}
				}).catch(err => console.log(err));
			}
		}
	}
</script>

<style>
    .colon {
    display: inline-block;
    margin: 0 4px;
    color: #ee0a24;
  }
  .block {
    display: inline-block;
    width: 22px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-color: #ee0a24;
  }
</style>